<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>部门信息列表</title>
    <link rel="stylesheet" href="/resources/element-ui/lib/theme-chalk/index.css">
    <script type="text/javascript" src="/resources/js/vue.js"></script>
    <script type="text/javascript" src="/resources/element-ui/lib/index.js"></script>
    <script type="text/javascript" src="/resources/js/axios.min.js"></script>
</head>
<body>
<div id="app">
    <!--顶部工具栏：添加  只有超级管理员可以查看-->
    <el-row>
        <el-col :span="4">
            <el-button type="success" icon="el-icon-plus" round size="small"
                       @click="openAddDeptWin">添加</el-button>
        </el-col>
    </el-row>
    <!--工具栏与数据表格之间间隙-->
    <div style="margin: 10px"></div>
    <!--数据表格-->
    <el-table :data="deptDataArray" border>
        <el-table-column label="序号" width="200" align="center" type="index"></el-table-column>
        <el-table-column label="主键" width="200" align="center" prop="id"></el-table-column>
        <el-table-column label="部门名称" width="200" align="center" prop="name"></el-table-column>
        <el-table-column label="部门地址" width="200" align="center" prop="loc"></el-table-column>
    </el-table>
    <!--分页-->
    <el-pagination
            @current-change="currentChange"
            @size-change="sizeChange"
            :current-page="pageNum"
            :total="total"
            :page-size="pageSize"
            :page-sizes="pageSizes"
            background
            layout="total,sizes,prev,pager,next,jumper"></el-pagination>
    <!--添加部门窗口-->
    <el-dialog title="添加部门" :visible.sync="addDeptWinOpenStatus"  @close="addDeptWinClose">
        <!--ref表示控件-->
        <el-form ref="addDeptWinRef" :model="addDeptFormData" :rules="addDeptFormRules">
            <el-form-item prop="name">
                <el-input v-model="addDeptFormData.name" prefix-icon="el-icon-location"
                          placeholder="请输入部门名称"></el-input>
            </el-form-item>
            <el-form-item prop="loc">
                <el-input v-model="addDeptFormData.loc" prefix-icon="el-icon-location"
                          placeholder="请输入部门地址"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-check" @click="addDeptOk">确定</el-button>
                <el-button type="danger" icon="el-icon-close" @click="resetAddDeptWin">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</div>

<!--引入自定义js-->
<script type="text/javascript" src="/resources/js/dept/getDepts.js"></script>
</body>
</html>